import React, { Component } from 'react';
import CSS from './MsgLogin.less';
import Navigation from '../../../components/Navigation/Navigation.jsx';

class MsgLogin extends Component {
  render() {
    return (
      <div className={CSS.outer}>
        <Navigation left={"返回"} context={"短信登录"} leftHandle={this.props.history.goBack}/>
        <div className={CSS.body}>
          <div className={CSS.title}>短信登录</div>
          <div className={CSS.content}>
            <div className={CSS.row}>
              <input
                placeholder="请输入手机号"
                onChange={e => this.getPhone(e)}
                value={this.phoneNumber}
                onFocus={this.changeState}
                onBlur={this.changeState}
              />
            </div>
            <div className={CSS.row}>
              <input
                placeholder="请输入验证码"
                value={this.code}
                onChange={e => this.getCode(e)}
                onFocus={this.changeState}
                onBlur={this.changeState}
              />
              <div className={CSS.getBtn}>点击获取</div>
            </div>
            <div className={CSS.pwdLogin}>密码登录</div>
          </div>
          <div className={CSS.box}>
            <div className={CSS.footer}>
              <div className={CSS.login} onClick={this.login}>登录</div>
              <div className={CSS.tips}>
                点击登录，即表示您同意<span>《注册协议》</span>
              </div>
            </div>
          </div>
          <div className={CSS.other}>
            <span>忘记密码?</span>
            <span><span style={{ color: '#999' }}>没有账号，</span>立即注册</span>
          </div>
        </div>
      </div>
    )
  }
}

export default MsgLogin